<template>
  <div class="container">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <div class="center">
      <slot name="center"></slot>
    </div>
    <div class="bottom">
      <slot name="bottom"></slot>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.container{
  padding: 10px;
  // flex:1;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  .header{
    width: calc(100% - 20px);
    height: 100px;
    background: rgba(3, 27, 54, 0.7);
    margin-bottom: 10px;
    padding: 10px;
  }
  .center{
    padding: 10px;
    padding-bottom: 0;
    background: rgba(3, 27, 54, 0.7);
    height: calc(100% - 195px);
  }
  .bottom{
    padding: 10px;
    padding-top: 0;
    background: rgba(3, 27, 54, 0.7);
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
